<template>
  <section class="bg-gray-900 py-4 md:py-6 h-full">
    <div class="container-custom h-full flex flex-col">
      <!-- 小标题：合作伙伴 -->
      <div class="mb-4" data-sa data-sa-delay="0">
        <h2 class="text-base md:text-[1.1rem] font-bold text-white text-left">合作伙伴</h2>
      </div>

      <!-- 白色 Logo 卡片网格 -->
      <div class="flex-1 min-h-0 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 grid-rows-4 gap-6 md:gap-4">
        <div
          v-for="(logo, index) in logos"
          :key="index"
          class="bg-white shadow-md overflow-hidden flex items-center justify-center p-6 md:p-8 h-full"
          data-sa
          :data-sa-delay="index * 30"
        >
          <img :src="logo" alt="partner" class="max-h-10 md:max-h-12 object-contain" loading="lazy" />
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
// 占位 Logo，可替换为实际图片地址
const logos = [
  'https://dummyimage.com/200x80/ffffff/999&text=LOGO',
  'https://dummyimage.com/200x80/ffffff/999&text=LOGO',
  'https://dummyimage.com/200x80/ffffff/999&text=LOGO',
  'https://dummyimage.com/200x80/ffffff/999&text=LOGO',
  'https://dummyimage.com/200x80/ffffff/999&text=LOGO',
  'https://dummyimage.com/200x80/ffffff/999&text=LOGO',
  'https://dummyimage.com/200x80/ffffff/999&text=LOGO',
  'https://dummyimage.com/200x80/ffffff/999&text=LOGO',
  'https://dummyimage.com/200x80/ffffff/999&text=LOGO',
  'https://dummyimage.com/200x80/ffffff/999&text=LOGO',
  'https://dummyimage.com/200x80/ffffff/999&text=LOGO',
  'https://dummyimage.com/200x80/ffffff/999&text=LOGO',
  'https://dummyimage.com/200x80/ffffff/999&text=LOGO',
  'https://dummyimage.com/200x80/ffffff/999&text=LOGO',
  'https://dummyimage.com/200x80/ffffff/999&text=LOGO',
  'https://dummyimage.com/200x80/ffffff/999&text=LOGO',
  'https://dummyimage.com/200x80/ffffff/999&text=LOGO',
  'https://dummyimage.com/200x80/ffffff/999&text=LOGO',
  'https://dummyimage.com/200x80/ffffff/999&text=LOGO',
  'https://dummyimage.com/200x80/ffffff/999&text=LOGO'
]
</script>
